<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/all.css">
    <style>
        body{
            background-image: url("./img/a12.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
        div{
            width:300px;
            height: 300px;
            display: flex;
            flex-direction: column;
            color: white;
            text-align: center;
            background-color: #FB6E74;
            opacity: 0.8;
            border-radius: 20%;
            justify-content:center;
            position: relative;
            left: 20%;
            
        }
        div > input{
            margin: 0 auto;
            width: 200px;
            height: 20px;
        }
        div > button{
            width: 80px;
            margin: 0 auto;
        }
        input:focus{
            outline: 2px solid #710EC1;
        }
        #inp1 ~ i{
            position: relative;
            top: -20px;
            left: 123px;
            color: chartreuse;
        }
        #inp2 ~ i{
            position: relative;
            top: -20px;
            left: 123px;
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div>
    用户名:<input type="text" id="inp1"><i></i> <br/>
    密码:<input type="password" id="inp2"><i></i><br/>
    <button>点击注册</button>
    </div>
</body>
<script type="text/javascript">
    // 用户名、密码的验证
    var inp1=document.getElementById("inp1");
    inp1.onblur=function(){
        var rex=/^(?=.*?[a-zA-Z]+)(?=.*?\d+).{5,8}$/;
        console.log(inp1.value);
        var icon=document.querySelector("#inp1 ~ i");
        if(rex.test(inp1.value))
        {
            alert("OK"+inp1.innerHTML);
            icon.setAttribute("class","fa fa-check");
        }
        else{
            icon.setAttribute("class","fa fa-times");
            icon.style.cssText="color:red;";
            alert("Fail");
        }
    }
    var inp2=document.getElementById("inp2");
    var bu1=document.getElementsByTagName("button")[0];
    bu1.onclick=function(){
        var rex2=/^(?=.*?[a-zA-Z])(?=.*?\d)(?=.*?[!@#$%^&*_]).{8}$/;
        var icon=document.querySelector("#inp2 ~ i");
        if(rex2.test(inp2.value))
        {
            alert("OK"+inp2.innerHTML);
            icon.setAttribute("class","fa fa-check");
        }
        else{
            icon.setAttribute("class","fa fa-times");
            icon.style.cssText="color:red;";
            alert("Fail");
        }
    }
</script>
</html>